<template>
  <div :style="topStyle">
    <a-card :bordered="false">
      <div v-if="isShow">
        <a-table
          :columns="columnstableKAITONG"
          :data-source="dataKAITONG"
          bordered
          size="middle"
          rowKey="id"
          style="margin: 20px 10% 0 10%"
          :pagination="false"
        >
          <template slot="file" slot-scope="text, record">
            <SelectFile
              :includeFileName="record.desc"
              :id="record.id"
              @fileListChange="fileListChange"
              @resultChange="resultChange"
            ></SelectFile>
          </template>
          <template slot="action" slot-scope="text, record">
            <UpoadFile
              @resultChange="resultChange"
              :uploadIsOk="record.uploadIsOk"
              :id="record.id"
              :url="record.url"
              :fileList="record.fileList"
              :btninfo="record"
              @btnChange="btnChange"
            ></UpoadFile>
          </template>
          <template slot="template" slot-scope="text, record">
            <a :href="record.downurl" :download="record.downurl">点击下载</a>
          </template>
        </a-table>
        <UploadFileAll
          style="margin: 20px 10% 0 10%;float:right"
          @resultChange="resultChange"
          @btnloading="btnloading"
          :info="dataKAITONG"
        ></UploadFileAll>
        <a-button type="primary" style="width:10%;margin:20px 45%" @click="daoru">查看总报表</a-button>
        <div style="height:1000px"></div>
      </div>
      <!-- //页面总报表 -->
      <div style="margin: 5px 10px" v-else>
        <a-button style="margin-bottom:5px" shape="round" type="primary" @click="comeBack">返回</a-button>
        <br />
        <a-range-picker
          @change="onChangePicker"
          :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]"
          :format="dateFormat"
        />
        <a-button type="primary" icon="search" style="margin:  10px 0 10px 10px" @click="searchFirst">查询</a-button>
        <a-button type="primary" icon="export" style="margin:  10px 0 10px 10px" @click="downloadQH"
          >excel导出</a-button
        >
        <a-table
          :loading="secondLoading"
          :columns="columnstableFirstNext"
          :data-source="dataFirstNext"
          bordered
          size="middle"
          :pagination="false"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getFXZB, exportExcelQH } from '@/api/public'
import { getNowFormatDate } from '@/utils/util.js'
import Vue from 'vue'
import SelectFile from '@/views/systemManage/uploadFile/selectFile'
import UpoadFile from '@/views/systemManage/uploadFile/upoadFile'
import UploadFileAll from '@/views/systemManage/uploadFile/uploadFileAll'
export default {
  name: 'TableList',
  components: {
    SelectFile,
    UpoadFile,
    UploadFileAll
  },
  props: ['tableInfo'],
  data() {
    this.columns = columns
    return {
      topStyle: {},
      qingdanlist: [],
      firstLoading: false,
      secondLoading: false,
      startTime: '',
      endTime: '',
      dateFormat: 'YYYY-MM-DD',
      fileList: '',
      analisyType: false,
      linshiId: '', //记录修改得某行清单id
      isShow: true,
      readDetailInfo: false, //二级页面（一级详情）
      daochuIs: false,
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN')
      },
      columnstableERJI,
      columnstableYIJI,
      columnstable,
      columnstableKAITONG, //KT
      columnstableFirst,
      columnstableFirstNext,
      data,
      dataFirst: [],
      dataFirstNext: [],
      dataKAITONG: [],
      searchData: [],
      visible: false,
      confirmLoading: false,
      mdl: null,
      advanced: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      uidList: []
    }
  },
  filters: {},
  mounted() {
    if (this.tableInfo == 2) {
      this.isShow = false
      this.getFirstData()
    }
  },
  created() {
    this.startTime = getNowFormatDate()
    this.endTime = getNowFormatDate()
    this.initdataKAITONG()
  },
  computed: {},
  methods: {
    moment,
    //上传结果按钮状态改变
    btnloading(id) {
      this.dataKAITONG[id].loading = true
    },
    //按钮状态改变
    btnChange(id) {
      this.dataKAITONG[id].loading = true
    },
    //上传文件
    fileListChange(fileList, result, id) {
      result == '文件名称错误' ? (this.dataKAITONG[id].uploadIsOk = true) : (this.dataKAITONG[id].uploadIsOk = false)
      this.dataKAITONG[id].fileList = fileList
      this.dataKAITONG[id].status = result
    },
    //删除结果改变
    resultChange(data, id) {
      this.dataKAITONG[id].status = data
      this.dataKAITONG[id].uploadIsOk = true
      this.dataKAITONG[id].fileList = []
      this.dataKAITONG[id].loading = false
    },
    searchFirst() {
      this.getFirstData()
    },
    ////获取数据
    getFirstData() {
      this.firstLoading = true
      getFXZB(this.startTime, this.endTime)
        .then(response => {
          this.dataFirst = response.data
          this.dataFirst.forEach((item, index) => {
            this.dataFirst[index].id = index
          })
          this.firstLoading = false
        })
        .catch(error => {
          this.firstLoading = false
        })
    },

    //export导出
    downloadQH() {
      exportExcelQH(this.startTime, this.endTime)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', 'excel.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    onChangePicker(date, dateString) {
      // console.log(date, dateString);
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
    },
    daoru() {
      this.isShow = false
      this.startTime = getNowFormatDate() + ' 00:00:00'
      this.endTime = getNowFormatDate() + ' 23:59:59'
      if (this.dataFirstNext.length == 0) {
        this.topStyle.height = 80 + 'vh'
      }
    },
    //初始化清单列表数据
    initdataKAITONG() {
      this.dataKAITONG = [
        {
          id: 0,
          name: '投诉工单',
          url: '/api/import/manage/survey',
          fileList: [],
          status: '未上传',
          desc: '投诉工单',
          uploadIsOk: false,
          rule: 'xx投诉工单xx.xlsx',
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 1,
          name: '故障工单',
          url: '/api/import/manage/survey',
          fileList: [],
          status: '未上传',
          desc: '故障工单',
          rule: 'xx故障工单xx.xlsx',
          uploadIsOk: false,
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        }
      ]
    },

    callback() {},
    comeBack() {
      this.isShow = true
      this.initdataKAITONG()
    },
    daocru() {
      this.isShow = false
    }
  }
}

const columnstableKAITONG = [
  {
    title: '报表类型', //Excel清单名称
    dataIndex: 'name',
    key: 'name',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '命名规则',
    dataIndex: 'rule',
    key: 'rule',
    width: 50,
    align: 'center'
  },
  {
    title: '上传操作',
    dataIndex: 'file',
    key: 'file',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'file' }
  },
  {
    title: '上传结果',
    dataIndex: 'status',
    key: 'status',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '模板下载',
    dataIndex: 'template',
    key: 'template',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'template' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 50,
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

const columnstable = []

const columnstableERJI = []
const columnstableYIJI = []
const columnstableFirstNext = [
  {
    title: 'CRM工单号',
    dataIndex: 'id',

    width: 100,
    align: 'center'
  },
  {
    title: '工单流水号',
    dataIndex: 'area',

    width: 80,
    align: 'center'
  },
  {
    title: '所属区县名称',
    dataIndex: 'overNum',

    width: 100,
    align: 'center'
  },
  {
    title: '项目名称',
    dataIndex: 'gxRatio',

    width: 80,
    align: 'center'
  },
  {
    title: '项目编号',
    dataIndex: 'tcRatio',

    width: 80,
    align: 'center'
  },
  {
    title: '主题',
    dataIndex: 'firstRatio',

    width: 80,
    align: 'center'
  },
  {
    title: '客户名称',
    dataIndex: 'firstRatio88',

    width: 80,
    align: 'center'
  },
  {
    title: '客户经理',
    dataIndex: 'firstRatio8',

    width: 80,
    align: 'center'
  },
  {
    title: '客户经理电话',
    dataIndex: 'firstRatio7',

    width: 100,
    align: 'center'
  },
  {
    title: '查勘派单时间',
    dataIndex: 'firstRatio6',

    width: 100,
    align: 'center'
  },
  {
    title: '查勘办结时间',
    dataIndex: 'firstRatio5',

    width: 100,
    align: 'center'
  },
  {
    title: '查勘自然日',
    dataIndex: 'firstRatio4',

    width: 100,
    align: 'center'
  },
  {
    title: '查勘是否超时',
    dataIndex: 'firstRatio3',

    width: 100,
    align: 'center'
  },
  {
    title: '工单状态',
    dataIndex: 'firstRatio2',

    width: 80,
    align: 'center'
  },
  {
    title: '数据源',
    dataIndex: 'firstRatio1',

    width: 100,
    align: 'center'
  }
]
const columnstableFirst = []
const data = []

const columns = []
</script>
